<template>
  <div class="header-left">
    <div class="tab-item"></div>
    <div
      v-for="(item, index) of tabList"
      :key="index"
      :class="['tab-item', getClassName(item.type)]"
      @click="changeTab(item.type)"
    >
      <span>{{ item.name }}</span>
    </div>

    <TimeIndex />
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import TimeIndex from '../time/index.vue';
import { TAB_TYPE, HomeService } from '@/views/home/homeService';

const tabList = [
  {
    name: '态势感知',
    type: TAB_TYPE.TSGZ,
  },
  {
    name: '综合研判',
    type: TAB_TYPE.ZHYP,
  },
];

function changeTab(type: TAB_TYPE) {
  HomeService.setTabType(type);
}

function getClassName(type: TAB_TYPE) {
  return HomeService.tabType.value === type ? 'left-active' : '';
}

defineComponent({ name: 'HeaderLeftComp' });
</script>

<style scoped lang="scss">
.header-left {
  @apply relative;

  .tab-item {
    @apply w-[278px] h-[68px] absolute top-0 flex justify-center items-center text-[#afc8e4] text-[22px] cursor-pointer;
    background: url('../assets/header-left-dark.png') no-repeat center;
    font-family: DOUYU;

    &:first-child {
      @apply right-[340px];
      background: url('../assets/header-left-light.png') no-repeat center;
    }

    &:nth-child(2) {
      @apply right-[134px];
    }

    &:nth-child(3) {
      @apply right-[-70px];
    }
  }

  .left-active {
    background: url('../assets/left-active.png') no-repeat center;
  }
}
</style>
